<template>
  <section class="mytable">
    <el-table :data="tableData" v-loading="listLoading" element-loading-text="Loading" border class="table-container" :max-height="626"
      @selection-change="handleSelectionChange">
      <el-table-column v-if="multipleFlag" type="selection" width="55" align="center">
      </el-table-column>
      <el-table-column v-for="(item, index) in tableColumn" v-if="!item.operate" :key="index" :prop="item.type" :label="item.name" :width="item.width" align="center">
      </el-table-column>
      <!-- 自定义 -->
      <el-table-column v-else :key="index" :prop="item.type" :label="item.name" :width="item.width" align="center">
        <template slot-scope="scope">
          <slot :name="item.type" :$index="scope.$index" :row="scope.row"></slot>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" v-if="buttonGroup.length">
        <template slot-scope="scope">
          <el-button v-for="(item, index) in buttonGroup" :key="index" @click="actionClick(scope.row, index+1)" type="text" size="small">{{item.name}}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-box">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 15, 30, 50]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
  </section>
</template>

<script>
  export default {
    props: {
      listLoading: {
        type: Boolean,
        default: false
      },
      tableColumn: {
        type: Array
      },
      tableData: {
        type: Array
      },
      pageSize: {
        type: Number
      },
      total: {
        type: Number
      },
      multipleFlag: {
        type: Boolean,
        default: false
      },
      buttonGroup: {
        type: Array
      },
      formatter: {
        type: Function
      },
      tableName: {
        type: String
      },
      currentPage: {
        type: Number,
        default: 1
      }
    },
    data() {
      return {
      }
    },
    methods: {
      queryClick(row) {
        this.$emit('queryClick', row)
      },
      deleteClick(row) {
        this.$emit('deleteClick', row)
      },
      handleSelectionChange(val) {
        this.$emit('handleSelectionChange', val)
      },
      actionClick(rowData, index) {
        this.$emit('actionClick', rowData, index)
      },
      changeSwitch(rowData) {
        this.$emit('changeSwitch', rowData)
      },
      handleSizeChange(pageSize) {
        this.$emit('handleSizeChange', pageSize)
      },
      handleCurrentChange(pageIndex) {
        this.$emit('handleCurrentChange', pageIndex)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .table-container {
    width: calc(100% - 40px);
    margin: 0px 20px;
  }

  .pagination-box {
    float:right;
    margin:20px 18px 0 0;
    clear: both;
  }
</style>

<style lang="scss">
  .mytable {
    .el-table th {
      line-height: 30px;
      text-align: center;
      background: #c0c4cc;
      border-color: #c0c4cc;
    }
  }
</style>
